@import "./variable";

.dark-theme {
  background-color: @app-background-color;

  /**
    base
   */

  .info_hover:hover {
    color: @color-info
  }

  .base_border {
    border: 1px solid @base-border-color;
  }

  .base_border_top {
    border-top: 1px solid @base-border-color;
  }

  .base_border_right {
    border-right: 1px solid @base-border-color;
  }

  .base_border_bottom {
    border-bottom: 1px solid @base-border-color;
  }

  .base_border_left {
    border-left: 1px solid @base-border-color;
  }

  /* Element Chalk Variables */
  /* Color */
  /*// color|[主题色,primary color,color BrandColor|0*/
  --el-color-primary: @background-color-info;
  --el-color-white: @text-color-highlight;
  --el-color-black: @app-background-color;
  --el-color-primary-light-1: #53a8ff;
  --el-color-primary-light-2: #66b1ff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-4: #8cc5ff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-6: #b3d8ff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-light-10: #03181d;
  --el-text-color-primary: #fefefe;
  --el-svg-monochrome-grey: @button-background-color;
  /*/// color|[成功颜色,success color,success color]|SecondaryColor|1*/
  --el-color-success: @background-color-success;
  /*/// color|[警告颜色,warning color,warning color]|SecondaryColor|1*/
  --el-color-warning: @background-color-warning;
  /*/// color|[危险颜色,danger color,danger color]|SecondaryColor|1*/
  --el-color-danger: @background-color-error;
  /*/// color|[信息颜色,info color,info color]|SecondaryColor|1*/
  --el-color-info: @background-color-highlight;
  --el-text-color-regular: #eeeeee;

  --el-color-success-light: #cdeeed;
  --el-color-warning-light: #fff1cc;
  --el-color-danger-light: #f9dfd8;
  --el-color-info: rgba(255, 255, 255, 0.7);
  --el-color-success-lighter: #fafdfd;
  --el-color-warning-lighter: #fff8e6;
  --el-color-danger-lighter: #fcefec;
  --el-color-info-lighter: #edf0f3;
  /*color|[主要文字颜色,primary text color,primary text color]|FontColor|2*/
  --el-color-text-primary: #fff;
  /*/// color|[常规文字颜色,regular text color,regular text color]|FontColor|2*/
  --el-color-text-regular: rgba(255, 255, 255, 0.9);
  /*/// color|[次要文字颜色,secondary text color,secondary text color]|FontColor|2*/
  --el-color-text-secondary: rgba(126, 147, 178, 1);
  /*/// color|[占位文字颜色,placeholder text color,placeholder text color]|FontColor|2*/
  --el-color-text-placeholder: #A7BCCB;
  /*/// color|[一级边框颜色,border color,border color]|BorderColor|3*/
  --el-border-color-base: #4a86489;
  /*/// color|[二级边框颜色,border color light,border color light]|BorderColor|3*/
  --el-border-color-light: #4e525a;
  /*/// color|[三级边框颜色,border color lighter,border color lighter]|BorderColor|3*/
  --el-border-color-lighter: #606266;
  /*/// color|[四级边框颜色,border color extra light,border color extra light]|BorderColor|3*/
  --el-border-color-extra-light: rgba(255, 255, 255, 0.12);

  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color-base);
  --el-disabled-border-color:var(--el-border-color-lighter);
  /*// Background*/
  /*/// color|[基础背景色,base background color,base background color]|BackgroundColor|4*/
  --el-background-color-base: rgba(0, 0, 0, 1);
  /*// 下拉窗口的背景色*/
  --el-background-color-show: rgba(1, 25, 55, 0.8);
  /* Link
    -------------------------- */
  --el-link-color: var(--el-color-primary-light-2);
  --el-link-hover-color: var(--el-color-primary);

  /* Border
    -------------------------- */
  --el-border-style-base: solid;
  --el-border-color-hover: var(--el-color-text-placeholder);
  --el-border-base: var(--el-border-width-base) var(--el-border-style-base) var(--el-border-color-base);

  /*// Box-shadow*/
  /*/// boxShadow|[基础投影,box shadow base,box shadow base]|Shadow|1*/
  --el-box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  /*// boxShadow|[深色投影,box shadow,box shadow]|Shadow|1*/
  --el-box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
  /*/// boxShadow|[浅色投影,box shadow,box shadow]|Shadow|1*/
  --el-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  /* Fill
    -------------------------- */
  --el-fill-base: var(--el-color-white);

  /* Typography
    -------------------------- */
  --el-font-path: 'fonts';
  /*/// fontSize|[主标题文字大小,Extra large font size,Extra large font size]|FontSize|0*/
  /*/// fontSize|[标题文字大小,large font size,large font size]|FontSize|0*/
  /*/// fontSize|[小标题文字大小,Medium font size,Medium font size]|FontSize|0*/
  /*/// fontSize|[正文文字大小,base font size,base font size]|FontSize|0*/
  /*/// fontSize|[正文（小）文字大小,small font size,small font size]|FontSize|0*/
  /*/// fontSize|[辅助文字大小,Extra small font size,Extra small font size]|FontSize|0*/
  /*/// fontWeight|[主要文字粗细,primary font weight,primary font weight]|FontWeight|1*/
  --el-font-weight-primary: 500;
  /*/// fontWeight|[次要文字粗细,secondary font weight,secondary font weight]|FontWeight|1*/
  --el-font-weight-secondary: 100;
  --el-font-color-disabled-base: #bbb;
  /* Size
    -------------------------- */

  /* z-index
    -------------------------- */
  --el-index-normal: 1;
  --el-index-top: 1000;
  --el-index-popper: 2000;

  /* Disable base
    -------------------------- */
  --el-disabled-fill-base: rgba(255, 255, 255, 0.2);
  --el-disabled-color-base: var(--el-color-text-placeholder);
  --el-disabled-border-base: var(--el-border-color-light);

  /* Icon
    -------------------------- */
  --el-icon-color: #666;
  --el-icon-color-base: var(--el-color-info);

  /* Checkbox
    -------------------------- */
  --el-checkbox-font-weight: var(--el-font-weight-primary);
  --el-checkbox-color: var(--el-color-text-regular);
  --el-checkbox-input-fill: var(--el-color-white);
  --el-checkbox-input-border: var(--el-border-base);
  --el-checkbox-input-border-color: var(--el-border-color-base);
  --el-checkbox-icon-color: var(--el-color-white);

  --el-checkbox-disabled-input-border-color: var(--el-border-color-base);
  --el-checkbox-disabled-input-fill: #edf2fc;
  --el-checkbox-disabled-icon-color: var(--el-color-text-placeholder);

  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
  --el-checkbox-disabled-checked-input-border-color: var(--el-border-color-base);
  --el-checkbox-disabled-checked-icon-color: var(--el-color-text-placeholder);

  --el-checkbox-checked-text-color: var(--el-color-primary);
  --el-checkbox-checked-input-border-color: var(--el-color-primary);
  --el-checkbox-checked-input-fill: var(--el-color-primary);
  --el-checkbox-checked-icon-color: var(--el-fill-base);

  --el-checkbox-input-border-color-hover: var(--el-color-primary);


  --el-checkbox-button-checked-fill: var(--el-color-primary);
  --el-checkbox-button-checked-color: var(--el-background-color-base);
  --el-checkbox-button-checked-border-color: var(--el-color-primary);
  --el-button-hover-bg-color: rgba(0, 0, 0, 0.06);
  /* Radio
    -------------------------- */
  /*/// fontSize|[]|Font|1*/
  /*/// fontWeight|[]|Font|1*/
  --el-radio-font-weight: var(--el-font-weight-primary);
  /*/// color|[]|Color|0*/
  --el-radio-font-color: var(--el-color-text-regular);
  /*/// color|[]|Color|0*/
  --el-radio-input-background-color: var(--el-background-color-base);
  --el-radio-input-border: var(--el-border-base);
  /*/// color|[]|Color|0*/
  --el-radio-input-border-color: var(--el-border-color-base);
  /*/// color|[]|Color|0*/
  --el-radio-icon-color: var(--el-color-white);

  --el-radio-disabled-input-border-color: var(--el-disabled-border-base);
  --el-radio-disabled-input-fill: var(--el-disabled-fill-base);
  --el-radio-disabled-icon-color: var(--el-disabled-fill-base);

  --el-radio-disabled-checked-input-border-color: var(--el-disabled-border-base);
  --el-radio-disabled-checked-input-fill: var(--el-disabled-fill-base);
  --el-radio-disabled-checked-icon-color: var(--el-color-text-placeholder);

  /*/// color|[]|Color|0*/
  --el-radio-checked-font-color: var(--el-color-primary);
  /*/// color|[]|Color|0*/
  --el-radio-checked-input-border-color: var(--el-color-primary);
  /*/// color|[]|Color|0*/
  --el-radio-checked-input-background-color: var(--el-color-white);
  /*/// color|[]|Color|0*/
  --el-radio-checked-icon-color: var(--el-color-primary);

  --el-radio-input-border-color-hover: var(--el-color-primary);

  /*/// fontSize|[]|Font|1*/
  /*/// color|[]|Color|0*/
  --el-radio-button-checked-background-color: var(--el-color-primary);
  /*/// color|[]|Color|0*/
  --el-radio-button-checked-font-color: var(--el-color-white);
  /*/// color|[]|Color|0*/
  --el-radio-button-checked-border-color: var(--el-color-primary);
  --el-radio-button-disabled-checked-fill: var(--el-border-color-extra-light);

  /* Select
    -------------------------- */
  --el-select-border-color-hover: var(--el-border-color-hover);
  --el-select-disabled-border: var(--el-disabled-border-base);
  --el-select-close-hover-color: var(--el-color-text-secondary);

  --el-select-input-color: var(--el-color-text-placeholder);
  --el-select-multiple-input-color: #666;
  --el-select-input-focus-background: var(--el-color-primary);

  --el-select-option-color: var(--el-color-text-regular);
  --el-select-option-disabled-color: var(--el-color-text-placeholder);
  --el-select-option-disabled-background: var(--el-color-white);
  --el-select-option-hover-background: var(--el-border-color-extra-light);
  --el-select-option-selected: var(--el-color-primary);
  --el-select-option-selected-hover: var(--el-border-color-extra-light);

  --el-select-group-color: var(--el-color-info);

  --el-select-dropdown-background: var(--el-background-color-show);
  --el-select-dropdown-shadow: var(--el-box-shadow-light);
  --el-select-dropdown-empty-color: #999;
  --el-select-dropdown-border: solid 1px var(--el-border-color-light);

  /* Alert
    -------------------------- */

  --el-alert-success-color: var(--el-color-success-lighter);
  --el-alert-info-color: var(--el-color-info-lighter);
  --el-alert-warning-color: var(--el-color-warning-lighter);
  --el-alert-danger-color: var(--el-color-danger-lighter);


  /* Message Box
    -------------------------- */
  --el-msgbox-content-color: var(--el-color-text-regular);

  --el-msgbox-success-color: var(--el-color-success);
  --el-msgbox-info-color: var(--el-color-info);
  --el-msgbox-warning-color: var(--el-color-warning);
  --el-msgbox-danger-color: var(--el-color-danger);

  /* Message
    -------------------------- */
  --el-message-shadow: var(--el-box-shadow-base);
  --el-message-background-color: #edf2fc;
  --el-message-content-color: var(--el-color-text-regular);
  --el-message-close-color: var(--el-color-text-placeholder);
  --el-message-close-hover-color: var(--el-color-text-secondary);

  --el-message-success-color: var(--el-color-success);
  --el-message-info-color: var(--el-color-info);
  --el-message-warning-color: var(--el-color-warning);
  --el-message-danger-color: var(--el-color-danger);

  /* Notification
    -------------------------- */
  --el-notification-shadow: var(--el-box-shadow-light);
  --el-notification-border-color: var(--el-border-color-lighter);
  --el-notification-color: var(--el-color-text-regular);
  --el-notification-title-color: var(--el-color-text-primary);

  --el-notification-close-color: var(--el-color-text-secondary);
  --el-notification-close-hover-color: var(--el-color-text-regular);

  --el-notification-success-color: var(--el-color-success);
  --el-notification-info-color: var(--el-color-info);
  --el-notification-warning-color: var(--el-color-warning);
  --el-notification-danger-color: var(--el-color-danger);

  /* Input
    -------------------------- */
  --el-input-color: var(--el-color-text-regular);
  --el-input-border: var(--el-border-base);
  --el-input-border-color: var(--el-border-color-base);
  --el-input-border-color-hover: var(--el-border-color-hover);
  --el-input-fill: var(--el-background-color-base);
  --el-input-fill-disabled: var(--el-disabled-fill-base);
  --el-input-color-disabled: --el-font-color-disabled-base;
  --el-input-icon-color: var(--el-color-text-placeholder);
  --el-input-placeholder-color: var(--el-color-text-placeholder);

  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-color-text-secondary);

  --el-input-focus-border: var(--el-color-primary);
  --el-input-focus-fill: var(--el-background-color-base);

  --el-input-disabled-fill: var(--el-disabled-fill-base);
  --el-input-disabled-border: var(--el-disabled-border-base);
  --el-input-disabled-color: var(--el-disabled-color-base);
  --el-input-disabled-placeholder-color: var(--el-color-text-placeholder);

  --el-cascader-menu-fill: var(--el-fill-base);
  --el-cascader-menu-border: var(--el-border-base);
  --el-cascader-menu-border-color: var(--el-border-color-base);
  --el-cascader-menu-color: var(--el-color-text-regular);
  --el-cascader-menu-option-color-active: var(--el-color-text-secondary);
  --el-cascader-menu-option-fill-active: rgba(126, 147, 178, 0.12);
  --el-cascader-menu-option-color-hover: var(--el-color-text-regular);
  --el-cascader-menu-option-fill-hover: rgba(255, 255, 255, 0.06);
  --el-cascader-menu-option-color-disabled: #999;
  --el-cascader-menu-option-fill-disabled: rgba(0, 0, 0, 0.06);
  --el-cascader-menu-option-empty-color: #666;
  --el-cascader-menu-group-color: #999;
  --el-cascader-menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 3px rgba(0, 0, 0, 0.14);
  --el-cascader-menu-option-pinyin-color: #999;
  --el-cascader-menu-submenu-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14), 1px 0 2px rgba(0, 0, 0, 0.14);

  /* Group
    -------------------------- */
  --el-group-option-fill-hover: rgba(0, 0, 0, 0.06);
  --el-group-title-color: var(--el-color-black);

  /* Tab
    -------------------------- */
  --el-tab-border-line: 1px solid #e4e4e4;
  --el-tab-header-color-active: 126, 147, 178;
  --el-tab-header-color-hover: var(--el-color-text-regular);
  --el-tab-header-color: var(--el-color-text-regular);
  --el-tab-header-fill-active: rgba(0, 0, 0, 0.06);
  --el-tab-header-fill-hover: rgba(0, 0, 0, 0.06);
  --el-tab-vertical-header-count-color: var(--el-color-white);
  --el-tab-vertical-header-count-fill: 126, 147, 178;

  /* Button
    -------------------------- */
  --el-button-font-weight: var(--el-font-weight-primary);
  --el-button-default-font-color: var(--el-color-text-regular);
  --el-button-default-background-color: var(--el-background-color-base);
  --el-button-default-border-color: var(--el-border-color-base);

  --el-button-disabled-font-color: var(--el-color-text-placeholder);
  --el-button-disabled-background-color: var(--el-background-color-base);
  --el-button-disabled-border-color: var(--el-border-color-lighter);

  --el-button-primary-border-color: var(--el-color-primary);
  --el-button-primary-font-color: var(--el-color-white);
  --el-button-primary-background-color: var(--el-color-primary);
  --el-button-success-border-color: var(--el-color-success);
  --el-button-success-font-color: var(--el-color-white);
  --el-button-success-background-color: var(--el-color-success);
  --el-button-warning-border-color: var(--el-color-warning);
  --el-button-warning-font-color: var(--el-color-white);
  --el-button-warning-background-color: var(--el-color-warning);
  --el-button-danger-border-color: var(--el-color-danger);
  --el-button-danger-font-color: var(--el-color-white);
  --el-button-danger-background-color: var(--el-color-danger);
  --el-button-info-border-color: var(--el-color-info);
  --el-button-info-font-color: var(--el-color-white);
  --el-button-info-background-color: var(--el-color-info);

  --el-button-hover-tint-percent: 20%;
  --el-button-active-shade-percent: 10%;

  /* Switch
    -------------------------- */
  --el-switch-on-color: var(--el-color-primary);
  --el-switch-off-color: var(--el-border-color-lighter);
  --el-switch-disabled-color: var(--el-border-color-lighter);
  --el-switch-disabled-text-color: var(--el-color-text-placeholder);

  /* Dialog
    -------------------------- */
  --el-dialog-background-color: var(--el-background-color-show);
  --el-dialog-box-shadow: 0 0 5px 5px rgba(76, 119, 169, 0.5);
  --el-dialog-close-hover-color: var(--el-color-primary);

  /* Table
    -------------------------- */
  --el-table-border-color: #384046;
  --el-table-border: 1px solid #384046;
  --el-table-text-color: var(--el-color-text-regular);
  --el-table-header-color: var(--el-color-text-secondary);
  --el-table-row-hover-background: var(--el-background-color-base);
  --el-table-current-row-background: --el-color-primary-light-9;
  --el-table-header-background: var(--el-background-color-base);
  --el-table-footer-background: var(--el-color-text-placeholder);
  --el-table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
  --el-bg-color-base: rgb(8 59 78);
  --el-table-tr-bg-color: #1e2831;

  /* Pagination
    -------------------------- */
  --el-pagination-fill: var(--el-background-color-base);
  --el-pagination-color: var(--el-color-text-primary);
  --el-pagination-button-color: var(--el-color-text-primary);
  --el-pagination-button-disabled-color: var(--el-color-text-placeholder);
  --el-pagination-button-disabled-fill: var(--el-color-white);
  --el-pagination-hover-fill: var(--el-color-white);
  --el-pagination-hover-color: var(--el-color-white);

  /* Popover
    -------------------------- */
  --el-popover-fill: var(--el-color-white);
  --el-popover-border-color: var(--el-border-color-lighter);
  --el-popover-title-color: var(--el-color-text-primary);

  /* Tooltip
    -------------------------- */
  --el-tooltip-fill: var(--el-background-color-show);
  --el-tooltip-color: var(--el-color-white);
  --el-tooltip-border-color: var(--el-color-text-primary);

  /* Tag
    -------------------------- */
  --el-tag-fill: rgba(3, 169, 167, 0.10);
  --el-tag-color: var(--el-color-primary);
  --el-tag-border: rgba(3, 169, 167, 0.20);

  --el-tag-info-fill: rgba(72, 100, 137, 0.10);
  --el-tag-info-border: rgba(72, 100, 137, 0.20);
  --el-tag-info-color: var(--el-color-info);

  --el-tag-primary-fill: rgba(3, 169, 167, 0.10);
  --el-tag-primary-border: rgba(3, 169, 167, 0.20);
  --el-tag-primary-color: var(--el-color-primary);

  --el-tag-success-fill: rgba(3, 169, 167, 0.10);
  --el-tag-success-border: rgba(3, 169, 167, 0.20);
  --el-tag-success-color: var(--el-color-success);

  --el-tag-warning-fill: rgba(255, 184, 0, 0.10);
  --el-tag-warning-border: rgba(255, 184, 0, 0.20);
  --el-tag-warning-color: var(--el-color-warning);

  --el-tag-danger-fill: rgba(227, 96, 60, 0.10);
  --el-tag-danger-border: rgba(227, 96, 60, 0.20);
  --el-tag-danger-color: var(--el-color-danger);

  /* Tree
    -------------------------- */
  --el-tree-node-hover-color: var(--el-background-color-base);
  --el-tree-text-color: var(--el-color-text-regular);
  --el-tree-expand-icon-color: var(--el-color-text-placeholder);

  /* Dropdown
    -------------------------- */
  --el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
  --el-dropdown-menuItem-hover-fill: --el-color-primary-light-9;
  --el-dropdown-menuItem-hover-color: --el-link-color;

  /* Badge
    -------------------------- */
  --el-badge-fill: var(--el-color-danger);

  /* Card
    --------------------------*/
  --el-card-border-color: var(--el-background-color-base);

  /* Slider
    --------------------------*/
  --el-slider-main-background-color: var(--el-color-primary);
  --el-slider-runway-background-color: var(--el-border-color-light);
  --el-slider-button-hover-color: #03a4a2;
  --el-slider-stop-background-color: var(--el-color-white);
  --el-slider-disable-color: var(--el-color-text-placeholder);

  /* Steps
    --------------------------*/
  --el-steps-border-color: var(--el-disabled-border-base);

  /* Menu
    --------------------------*/
  --el-menu-item-color: var(--el-color-text-secondary);
  --el-menu-item-fill: #05142A;
  --el-menu-item-hover-fill: rgba(0, 0, 0, .5);

  /* Rate
    --------------------------*/
  --el-rate-icon-color: var(--el-color-text-placeholder);

  // #43484d
  /* DatePicker
    --------------------------*/
  --el-datepicker-color: var(--el-color-text-regular);
  --el-datepicker-off-color: var(--el-color-text-placeholder);
  --el-datepicker-header-color: var(--el-color-text-regular);
  --el-datepicker-icon-color: var(--el-color-text-primary);
  --el-datepicker-border-color: var(--el-border-color-lighter);
  --el-datepicker-inner-border-color: #e4e4e4;
  --el-datepicker-inrange-color: var(--el-border-color-extra-light);
  --el-datepicker-inrange-hover-color: var(--el-border-color-extra-light);
  --el-datepicker-active-color: var(--el-color-primary);
  --el-datepicker-text-hover-color: var(--el-color-primary);
  --el-datepicker-cell-hover-color: #fff;

  /* Scrollbar
    --------------------------*/
  --el-scrollbar-background-color: rgba(126, 147, 178, .3);
  --el-scrollbar-hover-background-color: rgba(126, 147, 178, .5);

  /* Carousel
    --------------------------*/
  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
  --el-carousel-indicator-out-color: var(--el-border-color-hover);

  /* Collapse
    --------------------------*/
  --el-collapse-border-color: @base-border-color;
  --el-collapse-header-fill: var(--el-color-white);
  --el-collapse-header-color: var(--el-color-text-primary);
  --el-collapse-content-fill: var(--el-color-white);
  --el-collapse-content-color: var(--el-color-text-primary);

  /* Transfer
    --------------------------*/
  --el-transfer-border-color: var(--el-border-color-lighter);
  --el-transfer-panel-header-background: var(--el-background-color-base);
  --el-transfer-item-hover-background: var(--el-color-text-secondary);

  /* Timeline
    --------------------------*/
  --el-timeline-node-color: var(--el-border-color-light);

  /* Break-point
    --------------------------*/
  --el-calendar-border: var(--el-table-border, 1px solid var(--el-border-color-lighter));
  --el-calendar-header-border-bottom: var(--el-calendar-border);
  --el-calendar-selected-background-color: var(--el-color-primary);
}